<template>
	<view class="container sponsor-container">
		<view>
			<swiper class="swiper" circular :autoplay="true" :interval="5000" :duration="500">
				<swiper-item>
					<view class="swiper-item">
						<image class="banner-img" :src="$fileUrl+'轮播1.png'" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="page-panel">
			<view class="panel-title">农场认养</view>
			<view class="page-list" v-for="(item,idx) in pageList" :key="idx" @click="jump('/pages/sponsor/detail?id='+item.id)">
				<view class="list-top">
					<image class="data-imgico" :src="$fileUrl+'认.png'" mode="aspectFill"></image>
					<image class="data-bg" :src="$resFileUrl+item.image" mode="aspectFill"></image>
					<view class="data-content">
						<view class="list-title">{{item.variety}}</view>
						<view class="list-info">{{item.introduce}}</view>
						<view class="sell-status">
							<text>已售:</text>
							<text class="sell-number selled c-success">{{item.total-item.remain}}</text>
							<text>剩余:</text>
							<text class="sell-number c-success">{{item.remain}}</text>
						</view>
						<view class="sell-pro">
							<view class="sell-pro-full" :style="`left:-${item.remain/item.total*100}%`"></view>
						</view>
					</view>
				</view>
				<view class="list-bottom">
					<view class="list-price-unit c-danger">￥</view>
					<view class="list-price c-danger">{{item.price}}元</view>
					<view class="yuan-btn btn-success">进行中</view>
				</view>

			</view>
		</view>
		<view class="not-more" v-if="isLoading">加载中...</view>
		<view class="null-page" v-else-if="pageList.length<=0 ">
			<text class="iconfont">&#xe642;</text>
			<view class="null-page-tips">暂无数据~</view>
		</view>
		<view class="not-more" v-else-if="notMore">没有更多了...</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { hideLoading, showLoading } from '@/common/util';
	import api from '@/common/api';
	const isLoading = ref(false)
	const pageList = ref<any[]>([])
	const notMore = ref(true)
	onMounted(async () => {
		getPageList()
	})
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const res = await api.getAdoptList()
			pageList.value = res.data || []
		} finally {
			hideLoading()
			isLoading.value = false
		}

	}
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
</script>

<style lang="scss">
	.sponsor-container {
		padding-bottom: 120rpx;

		.swiper {
			height: 440rpx;
		}

		.banner-img {
			width: 100%;
		}

		.page-panel {
			background-color: #F9F9F9;
			transform: translateY(-10rpx);
			border-radius: 14rpx 14rpx 0 0;
			padding: 25rpx;
		}

		.page-list {
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 14rpx;
			padding: 15rpx;
			box-shadow: 0 8rpx 10rpx 0 rgba(0, 0, 0, 0.1);
		}

		.panel-title {
			font-size: 34rpx;
			padding-bottom: 10rpx;
		}

		.list-top {
			display: flex;
			align-items: center;
			border-bottom: solid 1px #C8C8C8;
			padding-bottom: 15rpx;
			position: relative;
		}

		.data-imgico {
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			z-index: 10;
			top: 0;
			left: 0;
		}

		.data-bg {
			width: 200rpx;
			height: 200rpx;
			border-radius: 14rpx;
			display: block;
			flex-shrink: 0;
		}

		.data-content {
			margin-left: 15rpx;
			flex-grow: 1;
		}

		.list-title {
			font-size: 30rpx;
			font-weight: bold;
		}

		.list-info {
			font-size: 30rpx;
			color: #8F8F8F;
			margin-top: 10rpx;
		}

		.sell-status {
			font-size: 26rpx;
			color: #6D6D6D;
			margin-top: 10rpx;
		}

		.sell-number {
			margin-left: 10rpx;
			display: inline-block;
			width: 100rpx;
		}

		.list-bottom {
			padding-top: 15rpx;
			display: flex;
			align-items: center;

			.yuan-btn {
				width: 150rpx;
				height: 60rpx;
				border-radius: 60rpx;
			}
		}

		.list-price {
			flex-grow: 1;
		}

		.sell-pro {
			height: 3px;
			background-color: #EBEBEB;
			width: 100%;
			margin-top: 15rpx;
			overflow: hidden;
			position: relative;
			border-radius: 3px;
		}

		.sell-pro-full {
			background-color: #17CC77;
			position: absolute;
			top: 0;
			height: 100%;
			width: 100%;
			border-radius: 3px;
		}

	}
</style>